<template>
  <div class="Certificate relative">
    <slot name="handle"></slot>
    <el-tabs v-model="activeName" type="card" class="w-full card-tabs">
      <el-tab-pane label="产品规格书" name="1"></el-tab-pane>
      <el-tab-pane label="认证证书" name="2"></el-tab-pane>
      <el-tab-pane label="样品检测报告" name="3"></el-tab-pane>
      <el-tab-pane label="产品丝印" name="4"></el-tab-pane>
      <el-tab-pane label="产品包装图" name="5"></el-tab-pane>
      <el-tab-pane label="产品说明书" name="6"></el-tab-pane>
      <el-tab-pane label="产品文案" name="8"></el-tab-pane>
      <el-tab-pane label="专利证书" name="9"></el-tab-pane>
      <el-tab-pane label="发布会资料" name="10"></el-tab-pane>
      <el-tab-pane label="其他" name="7"></el-tab-pane>
    </el-tabs>
  </div>
  <div class="card-body">
    <div class="flex mb-[6px]">
      <div class="flex-1">
        <slot name="header"></slot>
      </div>
      <el-button v-if="activeName != 3 && !disabled" @click="upload" :disabled="disabled"
        >附件上传</el-button
      >
    </div>
    <SampleTable v-if="activeName == 3"></SampleTable>
    <patentTable
      v-if="activeName == 9"
      :list="computedList(goods_sku_certificate)"
      :disabled="disabled"
    >
    </patentTable>
    <presentationTable
      v-if="activeName == 10"
      :list="computedList(goods_sku_certificate)"
      :disabled="disabled"
    >
    </presentationTable>
    <CTable
      :type="activeName"
      :list="computedList(goods_sku_certificate)"
      @change="changeTable"
      v-if="!(activeName == 3 || activeName == 9 || activeName == 10)"
      :disabled="disabled"
    >
    </CTable>
    <Accessory ref="AccessoryRef" @uploadFile="uploadFile"></Accessory>
  </div>
</template>

<script setup name="Certificate">
import { onMounted, reactive } from "vue";
import CTable from "./CTable.vue";
import SampleTable from "./SampleTable.vue";
import patentTable from "./patentTable.vue";
import Accessory from "./Accessory.vue";
import presentationTable from "./presentationTable.vue";

let handleType = reactive(inject("handleType"));
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      [];
    },
  },
});

const disabled = computed(() => {
  return (
    handleType.value == "view" ||
    (handleType.value == "edit" &&
      !(window.BTN_AUTH || []).includes("/goods/task/product/certificate-info"))
  );
});

const AccessoryRef = ref(null);
const activeName = ref("1");

const computedList = (goods_sku_certificate) => {
  return goods_sku_certificate.filter(
    (item) => item.certificate_class == activeName.value
  );
};

const changeTable = (row) => {
  const originalIndex = goods_sku_certificate.value.findIndex(
    (i) => i.filename == row.filename
  );
  if (originalIndex !== -1) {
    goods_sku_certificate.value.splice(originalIndex, 1);
  }
};

const goods_sku_certificate = computed({
  get: () => {
    return props.modelValue || [];
  },
  set: (val) => {
    emit("update:modelValue", val);
  },
});

const upload = () => {
  AccessoryRef.value?.open(activeName.value);
};

const uploadFile = (list) => {
  goods_sku_certificate.value = goods_sku_certificate.value.concat(list);
};
</script>

<style lang="scss" scoped>
:deep(.el-tabs__header) {
  margin: 0;
}
:deep(.el-table__header) {
  .el-table__cell {
    font-weight: 400 !important;
  }
}
</style>
